<template>
  <div class="analysis-section" v-if="examStore.currQuestion.showAnswer">
    <!-- 标题部分 -->
    <shadowHeader :title="'参考解析'" :rightLable="'我要提问'" :current="0">
    </shadowHeader>

    <!-- 题干部分 -->
    <div class="question-content">
      <!-- <div class="question-title">题干：</div> -->
      <!-- 选项列表 -->
      <!-- <div v-if="examStore.currQuestion.analysis_gpt" class="options-list">
        {{ examStore.currQuestion.analysis_gpt }}
      </div> -->

      <div class="options-list" v-html="analysis"></div>
      
    </div>
    <!-- 讨论区域 -->
    <div class="discussion-area" v-if="commitList.length > 0">
      <el-divider style="margin: 10px 0px"></el-divider>
      <Comment v-for="(item, index) in commitList" :key="index" :current="item"></Comment>
    </div>
  </div>
</template>

<script setup>
import katex from "katex";
import "katex/dist/katex.min.css"; // 添加KaTeX样式
import Comment from "@/components/Comment/index.vue";
import shadowHeader from "@/components/shadowHeader.vue";
import { useExam } from "@/stores/exam.js";
const examStore = useExam();

// 处理文本中的LaTeX公式
const renderMathInText = (text) => {
  if (!text) return "";
  
  // 使用正则表达式匹配所有 \(...\) 和 \[...\] 形式的LaTeX公式
  return text.replace(/\\\((.*?)\\\)/g, (match, formula) => {
    try {
      return katex.renderToString(formula, { displayMode: false });
    } catch (error) {
      console.error('KaTeX解析错误:', error);
      return match;
    }
  }).replace(/\\\[(.*?)\\\]/g, (match, formula) => {
    try {
      return katex.renderToString(formula, { displayMode: true });
    } catch (error) {
      console.error('KaTeX解析错误:', error);
      return match;
    }
  });
};

const analysis = computed(() => {
  const rawText = examStore.currQuestion.analysis_gpt || examStore.currQuestion.analysis || "";
  // 替换Markdown风格的数学公式为LaTeX格式
  const formattedText = rawText
    .replace(/\$\$(.*?)\$\$/g, '\\[$1\\]')  // 处理块级公式 $$...$$
    .replace(/\$(.*?)\$/g, '\\($1\\)');     // 处理行内公式 $...$
  
  return renderMathInText(formattedText);
});

defineProps({
  questionTitle: {
    type: String,
    default: "",
  },
  commitList: {
    type: Array,
    default: () => [],
  },
});
</script>

<style scoped lang="scss">
/* 添加MathJax公式样式 */
mjx-container {
  display: inline-block;
  margin: 0 2px;
  vertical-align: middle;
}

mjx-container[display="true"] {
  display: block;
  margin: 1em 0;
  text-align: center;
}

/* 修复黑色框框问题 */
mjx-container > svg {
  overflow: visible;
}

.options-list {
  white-space: pre-line;
}

.analysis-section {
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  .ask-btn {
    padding: 8px 10px;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #126983;
    border-radius: 8px;
    border: 1px solid #126983;
  }
}
</style>
